<template>
  <el-dialog
    @close="close"
    title="礼物记录"
    :visible.sync="dialog"
    width="45%"
  >
  <div class="app-container">
    <div class="filter-container bor-container">
      <el-form size="mini" :inline="true">
        <el-form-item prop="start" class="input_co"   label="时间">
          <el-date-picker class="input_s"  v-model="formInline.begintime" type="datetime" placeholder="" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
        <el-form-item prop="end" class="input_co1"   label="——">
          <el-date-picker class="input_s"  v-model="formInline.endtime" type="datetime" placeholder="" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item  >
        <br>
        <el-form-item class="input_co"   label="礼物名称">
          <el-select v-model="formInline.prizeid" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.prizename"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="input_co"   label="魅力值/贡献值">
          <el-select v-model="formInline.flag" placeholder="">
            <el-option label="不限" value="">不限</el-option>
            <el-option label="贡献值" value="1">贡献值</el-option>
            <el-option label="魅力值" value="2">魅力值</el-option>
          </el-select>
        </el-form-item>
        <el-button size="mini" @click="query()" icon="el-icon-search">查询</el-button>
      </el-form>
    </div>
    <el-table class="per_tb" stripe v-loading="loading" border :data="tableData">
      <el-table-column prop="createtime" label="时间" width="80px">

      </el-table-column>
      <el-table-column prop="givetype" label="类型">
          <template slot-scope="scop">
              <el-tag type="success" size="mini" v-if="scop.row.givetype == 0">收到</el-tag>
              <el-tag type="danger" size="mini" v-else-if="scop.row.givetype == 1">送出</el-tag>
          </template>
      </el-table-column>
      <el-table-column prop="prizenamesnap" label="礼物名称">

      </el-table-column>
      <el-table-column prop="num" label="数量">

      </el-table-column>
      <el-table-column prop="OppoName" label="对方昵称" width="80px">

      </el-table-column>
      <el-table-column prop="charmnumber" label="魅力值">

      </el-table-column>
      <el-table-column prop="contributenumber" label="贡献值">

      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination-right"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formInline.page"
      :page-sizes="[10]"
      :page-size="formInline.pagenum"
      layout="total, sizes, prev, pager, next, jumper"
      :total="formInline.total">
    </el-pagination>
  </div>
  </el-dialog>
</template>
<script>
  import { getGiftListAPI } from '@/api/person'
  import { getGiftSystemListAPI } from '@/api/gift'
  import { mapGetters } from 'vuex'
  export default {
    name: 'Gift',
    props: {
      dialog_: {
        type: Boolean,
        default: false
      },
      id: {
        type: String,
        default: null
      }
    },
    data() {
      return {
        options: [],
        status_type:'',
        value: '',
        formInline: {
          userid: this.id,
          name: '',
          page:1,
          flag: '',
          pagenum: 10,
          total: 0,
          prizeid:''

        },
        editUser: null, // 编辑时传入的对象
        loading: false,
        tableData: [],
        dialog: {

          infoStatus: false,
          giftStatus: false,
          rechargeStatus: false,
          withdrawStatus: false,
          exchangeStatus: false,
          accountStatus: false,
          disableStatus: false,
          identityStatus: false,
          personId:''
        }
      }
    },
    computed: {
      ...mapGetters([
        'buttons',
      ])
    },
    mounted() {
      this.dialog = this.dialog_
      this.getUserList()
      this.getGiftSystemList();
    },
    methods: {
      // 编辑打开弹窗
      openEdit(obj) {
        this.dialog.infoStatus = true
      },
    close() {
      this.$emit('close')
    },
      // 操作栏中的下拉框发生修改
      selectChange(obj) {

      },
      // 点击查询事件
      query() {
        if(this.formInline.charm_number == '不限' ){
          this.formInline.flag = 0
        }else if(this.formInline.charm_number == '魅力值'){
          this.formInline.flag = 1
        } else if(this.formInline.charm_number == '贡献值'){
          this.formInline.flag = 2
        }
        this.formInline.page = 1
        this.getUserList()
      },
      // 操作成功的钩子用来更新列表
      success() {
        this.getUserList()
      },
      // 关闭弹窗返回的钩子
      closeInfo() {
        this.dialog.infoStatus = false;
      },

      closeWithdraw() {
        this.dialog.withdrawStatus = false;
      },
      // pageSize发生改变触发
      handleSizeChange(val) {
        this.pageNum = 1
        this.pageSize = val
        this.getUserList()
      },
      // pageNum 发生改变触发
      handleCurrentChange(val) {
        this.formInline.page = val
        this.getUserList()
      },
      // 获取用户礼物日志getGiftSystemListAPI
      getUserList() {
        this.loading = true
        //this.formInline.userid = 103182
        getGiftListAPI(this.formInline).then(res => {
          this.loading = false
          if (res.code === 0) {
            this.tableData = res.data.list
            this.formInline.total = res.data.total
          } else {
            this.$message.error('查询失败')
          }
        })
      },
      // 获取礼物列表
      getGiftSystemList() {
        this.loading = true
        //this.formInline.userid = 103182
        getGiftSystemListAPI({userid:this.id}).then(res => {/*this.formInline*/
          this.loading = false
          if (res.code === 0) {
            this.options = res.data.list
          } else {
            this.$message.error('查询失败')
          }
        })
      }
    }
  }
</script>
<style>
  .userCount{
    background-color: rgba(242, 242, 242, 1);
    height: 45px;
    line-height: 45px;
    margin-left: 38px;
    font-size: 14px;
  }
  .userCount span {
    margin-right: 40px;
    margin-left: 14px;
  }
  .input_co{
    margin-left:38px;
  }
  .input_co1{
    margin-left:0px;
  }
  .input_s{
    width:180px!important;
  }
  .el-date-editor.input_s.el-input.el-input--mini.el-input--prefix.el-input--suffix.el-date-editor--datetime {
    width: 125px;
  }
  .per_tb{
    margin-top: 15px;
    margin-left: 38px;
    width:97.8%;
  }
  .pagination-right.el-pagination.is-background {
    margin-left: 36px;
    margin-top: 5px;
  }
  .app-container{
    border-top:1px solid lightgrey;
    width:100%;
    margin-top:1px;
  }
</style>

